<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				/*当点击全选时，获取全选表单项的checked属性值flag为true即被选中
				     然后给所有属性名name='one'表单项添加被选中的属性checked="true"
				 */
				$("#all").click(function() {
					var flag = $(this).prop("checked");
					console.log(flag);
					var oneList = $("input[name='one']");
					for(var i = 0; i < oneList.length; i++) {
						$(oneList[i]).prop("checked", flag);
					}
				});
				/*给所有单选框绑定点击事件，当点击某个单选框取消被选中时，
				 *这时候需要遍历所有单选框当找到任意一个没被选中的单选框时
				 *就修改全选的那个单选框的被选中状态为false即checked=false,
				 *若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true
				 **/
				$("input[name='one']").click(function() {
					var oneList = $("input[name='one']");
					for(var i = 0; i < oneList.length; i++) {
						if(!$(oneList[i]).prop("checked")) {
							$("#all").prop("checked", false);
							return;
						}
					}
					$("#all").prop("checked", true);
				});
			});
		</script>
	</head>

	<body>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
			<tr>
				<th>全选<input id="all" type="checkbox" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
		</table>
	</body>

</html>